<template>
    <div class="box">
      <el-drawer
          title="回传限制"
          :visible.sync="dialogShow"
          :with-header="true"
          :size="device === 'mobile'?'80%':'35%'"
          >
          <div class="drawer_content" style="padding:0 20px 20px;">
            <el-form :model="form" :rules="rules" label-width="100px" ref="formRef">
              <el-form-item label="主键" prop="id">
                <el-input
                  v-model="form.id"
                  style="width: 100%"
                  placeholder="请输入"
                  clearable
                  disabled
                />
              </el-form-item>
              <el-form-item
                 label="接通限制状态"
                 prop="isConnect"
               >
                 <el-select
                   v-model="form.isConnect"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                   @change="changeSelect(form.isConnect,'connectStar')"
                 >
                   <el-option
                     v-for="(item, index) in statusOption"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item
                 label="接通限制(%)"
                 prop="connectStar"
                 v-if="form.isConnect == 1"
               >
                 <el-input-number 
                   v-model="form.connectStar" 
                   controls-position="right" 
                   placeholder="请输入"
                   :min="0"
                   :max="100" 
                   :precision="2"
                   style="width: 100%;"
                 >
                 </el-input-number>
                </el-form-item>
                <el-form-item
                 label="1星限制状态"
                 prop="isOne"
               >
                 <el-select
                   v-model="form.isOne"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                   @change="changeSelect(form.isOne,'oneStar')"
                 >
                   <el-option
                     v-for="(item, index) in statusOption"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item
                 label="1星限制(%)"
                 prop="oneStar"
                 v-if="form.isOne == 1"
               >
                 <el-input-number 
                   v-model="form.oneStar" 
                   controls-position="right" 
                   placeholder="请输入"
                   :min="0"
                   :max="100" 
                   :precision="2"
                   style="width: 100%;"
                 >
                 </el-input-number>
                </el-form-item>
                 <el-form-item
                 label="2星限制状态"
                 prop="isTwo"
               >
                 <el-select
                   v-model="form.isTwo"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                   @change="changeSelect(form.isTwo,'twoStar')"
                 >
                   <el-option
                     v-for="(item, index) in statusOption"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item
                 label="2星限制(%)"
                 prop="twoStar"
                 v-if="form.isTwo == 1"
               >
                 <el-input-number 
                   v-model="form.twoStar" 
                   controls-position="right" 
                   placeholder="请输入"
                   :min="0"
                   :max="100" 
                   :precision="2"
                   style="width: 100%;"
                 >
                 </el-input-number>
                </el-form-item>
                <el-form-item
                 label="优质限制状态"
                 prop="isThree"
               >
                 <el-select
                   v-model="form.isThree"
                   clearable
                   filterable
                   placeholder="请选择"
                   style="width: 100%"
                   @change="changeSelect(form.isThree,'threeStar')"
                 >
                   <el-option
                     v-for="(item, index) in statusOption"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
                   ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item
                 label="优质限制(%)"
                 prop="threeStar"
                 v-if="form.isThree == 1"
               >
                 <el-input-number 
                   v-model="form.threeStar" 
                   controls-position="right" 
                   placeholder="请输入"
                   :min="0"
                   :max="100" 
                   :precision="2"
                   style="width: 100%;"
                 >
                 </el-input-number>
                </el-form-item>

            </el-form>
            <div class="drawer_footer" style="text-align: center;">
                <el-button type="primary" @click="handleSubmit('formRef')"
                  >保存</el-button
                >
                <el-button @click="handleClose">取 消</el-button>
            </div>
          </div>
        </el-drawer>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import {
    setStarUpLimit,
  } from '@/api/business/channelManagement'
  export default {
    name: 'starUpLimit',
    data() {
      return {
        // 回传限制抽屉显示状态
        dialogShow: false,
        // 回传限制的表单信息
        form: {
  
        },
        // 回传限制表单校验规则
        rules: {
  
        },
        // 状态筛选项
        statusOption:[
          { label: "关闭", value: 0 },
          { label: "开启", value: 1 },
        ]
      }
        
    },
    computed:{
      ...mapGetters(["sidebar", "device"]),
    },
    methods: {
      // 改变状态置0对应数值
      changeSelect(value,prop){
        if(value == 0){// 关闭状态置0状态值
          this.form[prop] = 0;
        }
      },
      // 打开抽屉
      openDrawer(data){
          this.dialogShow = true
          // 设置表单数据
          this.$set(this,'form',data)
      },
      /*提交操作*/
      handleSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let params = {};
              params = JSON.parse(JSON.stringify(this.form));
              console.log(params);
              // 回传设置操作
              setStarUpLimit(params).then((res) => {
                   if (res.code === 200) {
                     this.$message.success("操作成功");
                     // 刷新操作
                     this.handleRefresh();
                   }
                 });
            }
          });
      },
      // 设置刷新页面
      handleRefresh() {
        this.$emit('refreshStarHaul')
        // 关闭抽屉
        this.handleClose();
      },
      /*关闭抽屉*/
      handleClose() {
         this.$refs["formRef"].resetFields();
         this.form = this.$options.data().form;
         this.dialogShow = false;
       },
    },
  
  };
</script>
  